<template>
  <div>
    <header>
      <a href="javascript:;" class="left">
        <i class="iconfont icon-up21"></i>
      </a>
      <p>用户中心</p>
      <a href="javascript:;" class="right">
        <i class="iconfont icon-kefu1"></i>
      </a>
    </header>
    <!-- section -->
    <section>
      <!-- usermain -->
      <div class="usermain">
        <img
          class="img"
          src="http://m.vnasi.com/statics/images/main_bg_top.jpg"
          alt=""
        />
        <div class="mainbody">
          <img
            class="Touxiang"
            src="http://m.vnasi.com/resources/images/head_portrait.png"
            alt="头像"
          />
          <div class="username" v-if="name">
            {{ name }}
          </div>
          <div class="user_txt" v-else>
            <router-link to="/login" class="lo">登录</router-link>
            <router-link class="lo" to="/register">注册</router-link>
          </div>
        </div>
      </div>
      <!-- order -->
      <ul class="order_status">
        <li>
          <router-link to="/allorder">
            <div class="iconfont icon-fukuan"></div>
            <p>待付款</p>
            <!--<span class="nums">0</span>-->
          </router-link>
        </li>
        <li>
          <a href="javascript:;">
            <div class="iconfont icon-daishouhuo"></div>
            <p>待收货</p>
          </a>
          <!--<span class="nums">0</span>-->
        </li>
        <li>
          <a href="javascript:;">
            <div class="iconfont icon-up1"></div>
            <p>已完成</p>
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <div class="iconfont icon-wenzhenjilu"></div>
            <p>全部订单</p>
          </a>
        </li>
      </ul>
      <!-- 在线补款 -->
      <ol class="personal_item">
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-renminbi1"></span>在线补款
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-fenlei3"></span>订单查询
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
      </ol>
      <!-- 个人信息 -->
      <ol class="personal_item">
        <li>
          <router-link class="item-link" to="/PerCenter">
            <span class="l_icon iconfont icon-icon03"></span>个人信息
            <i class="r_icon iconfont icon-up11"></i>
          </router-link>
        </li>
        <li>
          <div class="item-link" @click="handledz">
            <span class="l_icon iconfont icon-location"></span>地址管理
            <i class="r_icon iconfont icon-up11"></i>
          </div>
        </li>
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-wodeyouhuiquan"></span>优惠券
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
      </ol>
      <!-- 问题反馈 -->
      <ol class="personal_item">
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-wentifankui"></span>问题反馈
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-tubiao_bangzhuzhongxin"></span
            >帮助中心
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-xinxi"></span>鲜花百科
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-leimupinleifenleileibie1"></span
            >更多
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
      </ol>
      <!-- 设置 -->
      <ol class="personal_item">
        <li>
          <a class="item-link" href="javascript:;">
            <span class="l_icon iconfont icon-shezhi2"></span>安全设置
            <i class="r_icon iconfont icon-up11"></i>
          </a>
        </li>
      </ol>
      <div class="exit" @click="exit">
        <p>安全退出</p>
      </div>
    </section>
    <!-- 底部区域 -->
    <footer>
      <a href="javascript:;" class="hover">
        <i class="iconfont icon-fangzi2"></i>
        <span>首页</span>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-fenlei3"></i>
        <span>分类</span>
      </a>
      <a href="javascript:;" class="cart">
        <i class="iconfont icon-gouwuche1"></i>
        <span>购物车</span>
        <b>0</b>
      </a>
      <a href="javascript:;">
        <i class="iconfont icon-icon03"></i>
        <span>个人中心</span>
      </a>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: null,
    };
  },
  created() {
    let name = localStorage.getItem("userInfo");
    // console.log(JSON.parse(name).username);
    this.name = JSON.parse(name).username;
    // console.log(this.name);
    console.log(JSON.parse(localStorage.userInfo));
  },
  methods: {
    exit() {
      localStorage.removeItem("userInfo");
      this.$router.push("/");
    },
    handledz() {
      let n = 1;
      this.$router.push({ path: "/addresslist", query: { n } });
    },
  },
};
</script>

<style src="../assets/css/myspec.css" scoped></style>
<style src="../assets/css/reset.css" scoped></style>
<style src="../assets/font/iconfont.css" scoped></style>
<style scoped>
.username {
  margin-top: 15px;
  width: 375px;
  color: #666;
  text-align: center;
  font-size: 20px;
}
.exit {
  width: 355px;
  height: 41px;
  background: #f60;
  border-radius: 5px;
  margin: auto;
  margin-bottom: 10px;
}
.exit p {
  color: #fff;
  width: 100%;
  text-align: center;
  line-height: 41px;
}
</style>